<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="content-type" content="text/html" />
	<meta name="author" content="Jackie Do" />
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>    
    <script type="text/javascript">
        
        $(document).ready(function() {
            slideshow(500,1000);
        });
        function slideshow(Duration, Delay) {
            $slide = $("#slide");
            //alert(typeof($slide.css("left")));
            if ($slide.css("left") != "-1500px") {
                $slide.animate({"left":"-=375"},Duration);
            } else if ($slide.css("left") == "-1500px"){
                $slide.animate({"left":"0"},0);
                $slide.animate({"left":"-=375"},Duration);
            }
            setTimeout("slideshow("+Duration+", "+Delay+")", Delay);   
        }
    </script>
    <style>
    .clear {
        clear: both;
    }
        img {
            float: left;
            width: 375px;
            height: 272px;
        }
        #slide {
            position: absolute;
            float: left;          
            width: 1875px;
            height: 272px;
            left: 0px;
        }
        #frame {
            position: relative;
            border: 1px solid silver;
            width: 375px;
            height: 272px;
            margin: auto;
            overflow: hidden;
        }
    </style>
    
	<title>Untitled 1</title>
</head>

<body>
<div id="frame">
    <div id="slide">
        <img src="images/item/1382305294_lumia9251.jpg" />
        <img src="images/item/1382305352_iphone-56.jpg" />
        <img src="images/item/1382305532_galaxys4.jpg" />
        <img src="images/item/1382305596_nexus4.jpg" />
        <img src="images/item/1382305294_lumia9251.jpg" />
    </div>
    <div class="clear"></div>
</div>
    
<a href="#" id="nextSlide">Nextaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a>
    
</body>
</html>